import { Button, Checkbox, DatePicker, Form, Input, Radio, Popconfirm, message } from 'antd';
import { LeftCircleTwoTone, DeleteOutlined } from '@ant-design/icons';
import { useState, createRef } from 'react';
import { useNavigate } from 'react-router-dom';
import MyBraftEditor from '../../../compoennts/comm/MyBraftEditor';
import services from '../../../services';

function VoteInput(_props) {
    const navigate = useNavigate()
    const [editorValue, setEditorValue] = useState()
    const [index, setIndex] = useState(1)
    const [elementList, setElementList] = useState([])
    const [form] = Form.useForm()
    const [tempOptionValue,setTempOptionValue] = useState()
    const [optionArray,setOptionArray] = useState([])
    const Publisher = { Publisher: sessionStorage.getItem('name') ? sessionStorage.getItem('name') : '匿名' }



    //气泡提示框点击确认触发，将删除该虚拟dom
    const confirm = (e) => {
        console.log(e.parent)
        setElementList(elementList => elementList.filter((_s, i) => (i !== index - 1)))
    }

    const getOptionsValue = (e,_i)=>{
        console.log({[_i]:e.target.value})
        setOptionArray({...optionArray,[_i]:e.target.value})
    }

    //投票选项按钮触发，创建新的dom
    const handleCreateInput = () => {
        let i = index
        let element = (
            <li style={{ marginBlock: '10px', marginLeft: '30px' }} key={i}  >
                <span>选项{index}：</span>
                <Input placeholder='请输入'  onChange={(e)=>getOptionsValue(e,i)} value={tempOptionValue} style={{ width: '200px', marginInline: '10px' }} />
                {/* 气泡提示框  点击删除图标显示*/}
                <Popconfirm placement="right" title="确定要删除吗？" onConfirm={(e) => confirm(e)} okText="是" cancelText="否" style={{ background: 'black' }}>
                    <DeleteOutlined style={{ fontSize: '20px', cursor: 'pointer' }} />
                </Popconfirm>
            </li>
        )
        i++
        setIndex(i)
        setElementList([...elementList, element])
    }

    //发起投票左边的按钮或者取消按钮触发，回退到投票管理页面
    const handleBack = () => {
        navigate(-1)
    }

    const handleSubmit = () => {
        // console.log({ ...form.getFieldsValue(), ...Publisher ,'option1':optionArray})
        addVote({ ...form.getFieldsValue(), ...Publisher,'option1':optionArray })
    }

    //新增投票发起请求
    const addVote = async (args) => {
        console.log(args)
        let res = await services.voteService.addVote(args)
        if (res.code === 200) {
            message.success("提交成功")
        } else {
            message.error("提交失败")
        }
    }

    // 富文本编辑器的值变化时触发回调函数
    const handleEditChange = (value) => {
        //value的值是从子组件中传过来的
        setEditorValue(value)
        // console.log(value)
    }

    return (
        <div className='voteInput'>
            <div className='topNav'>
                <div><LeftCircleTwoTone onClick={handleBack} style={{ fontSize: '20px', cursor: 'pointer' }} /><span>发起投票</span></div>
                <div>
                    <Button type='default' onClick={handleBack}>取消</Button>
                    <Button type='primary' onClick={handleSubmit}>发布</Button>
                </div>
            </div>
            <div className='voteform'>
                <Form form={form} >
                    <Form.Item
                        label="投票标题"
                        name="title"
                        rules={[{ required: true }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        label="投票说明"
                        name="explain1"
                        rules={[{ required: true }]}
                    >
                        <MyBraftEditor className="editor" value={editorValue} onChange={handleEditChange} style={{ width: '1000px', border: '1px solid #ccc', }} />
                    </Form.Item>
                    <Form.Item
                        label="投票选项"
                        name="option1"
                        rules={[{ required: true }]}
                    >
                        <>
                            <Button
                                onClick={handleCreateInput}
                                style={{ background: 'rgba(30, 198, 149, 1)', color: '#fff', paddingInline: '5px', border: 0 }}
                            >
                                增加选项
                            </Button>
                            <div id='optionArea'>{elementList}</div>
                        </>
                    </Form.Item>
                    <Form.Item
                        label="投票类型"
                        name="type"
                        rules={[{ required: true }]}
                    >
                        <Radio.Group >
                            <Radio value={1}>单选</Radio>
                            <Radio value={2}>多选</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="截止时间"
                        name="end"
                        rules={[{ required: true }]}
                    >
                        <DatePicker placeholder='截止时间' showTime />
                    </Form.Item>
                    <Form.Item
                        label="发布范围"
                        name="scope"
                        rules={[{ required: true }]}
                    >
                        <Radio.Group >
                            <Radio value="全校">全校</Radio>
                            <Radio value="指定班级/部门">指定班级/部门</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="发布对象"
                        name="object"
                        rules={[{ required: true }]}
                    >
                        <Checkbox.Group>
                            <Checkbox value="老师">老师</Checkbox>
                            <Checkbox value="学生">学生</Checkbox>
                            <Checkbox value="家长">家长</Checkbox>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item
                        label="投票结果"
                        name="result"
                        rules={[{ required: true }]}
                    >
                        <Radio.Group >
                            <Radio value="公开">公开</Radio>
                            <Radio value="不公开">不公开</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default VoteInput;